<template>
  <div class="page-wrapper">
    <div class="address-list-container">
      <div class="page-header">
        <h1 class="title">我的收货地址</h1>
        <a-button type="primary" @click="handleAddAddress"> 添加地址 </a-button>
      </div>

      <div class="address-content-card">
        <!-- 地址列表表格 -->
        <div class="address-table">
          <div class="table-header">
            <div class="col-receiver">收货人</div>
            <div class="col-phone">电话/手机</div>
            <div class="col-region">所在地区</div>
            <div class="col-address">详细地址</div>
            <div class="col-actions">操作</div>
            <div class="col-default">设为默认地址</div>
          </div>

          <div class="table-body">
            <div
              v-for="address in addressList"
              :key="address.id"
              class="table-row"
            >
              <div class="col-receiver">{{ address.consignee }}</div>
              <div class="col-phone">{{ address.phone }}</div>
              <div class="col-region">{{ formatRegion(address) }}</div>
              <div class="col-address">{{ address.detail }}</div>
              <div class="col-actions">
                <a-button type="link" @click="handleEdit(address)"
                  >修改</a-button
                >
                <a-divider type="vertical" />
                <a-popconfirm
                  title="确定要删除这个地址吗？"
                  @confirm="handleDelete(address)"
                >
                  <a-button type="link" danger>删除</a-button>
                </a-popconfirm>
              </div>
              <div class="col-default">
                <a-button
                  type="link"
                  :class="{ 'default-active': address.isDefault === 1 }"
                  @click="handleSetDefault(address)"
                  :disabled="address.isDefault === 1"
                >
                  {{ address.isDefault === 1 ? "默认地址" : "设为默认" }}
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import {
  listUsingGet,
  deleteUsingPost,
  setDefaultUsingPost,
} from "@/api/addressBookController";
import type API from "@/api";

const router = useRouter();
const addressList = ref<API.AddressBook[]>([]);

// 格式化手机号
const formatPhone = (phone: string) => {
  return `${phone.slice(0, 3)}****${phone.slice(7)}`;
};

// 格式化完整地址
const formatFullAddress = (address: API.AddressBook) => {
  return `${address.provinceName}${address.cityName}${address.districtName}${address.detail}`;
};

// 格式化地区
const formatRegion = (address: API.AddressBook) => {
  return `${address.provinceName} ${address.cityName} ${address.districtName}`;
};

// 加载地址列表
const loadAddressList = async () => {
  try {
    const res = await listUsingGet();
    if (res.data?.code === 0 && res.data.data) {
      addressList.value = res.data.data;
    }
  } catch (error) {
    message.error("获取地址列表失败");
  }
};

// 删除地址
const handleDelete = async (address: API.AddressBook) => {
  try {
    const res = await deleteUsingPost(address);
    if (res.data?.code === 0) {
      message.success("删除成功");
      loadAddressList();
    }
  } catch (error) {
    message.error("删除失败");
  }
};

// 设置默认地址
const handleSetDefault = async (address: API.AddressBook) => {
  try {
    const res = await setDefaultUsingPost(address);
    if (res.data?.code === 0) {
      message.success("设置成功");
      loadAddressList();
    }
  } catch (error) {
    message.error("设置失败");
  }
};

// 编辑地址
const handleEdit = (address: API.AddressBook) => {
  router.push(`/address/edit/${address.id}`);
};

// 新增地址
const handleAddAddress = () => {
  router.push("/address/add");
};

onMounted(() => {
  loadAddressList();
});
</script>

<style scoped>
/* 添加外层容器样式 */
.page-wrapper {
  background-color: #f8f8f8;
  min-height: 100vh;
  width: 100%;
  padding: 20px 0;
}

.address-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  margin: 0;
}

/* 表格样式 */
.address-table {
  background: transparent;
  border: none;
}

.table-header {
  display: grid;
  grid-template-columns: 100px 120px 200px 300px 80px 100px 100px;
  background: #f5f5f5;
  padding: 12px 16px;
  font-weight: 500;
  color: #666;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 4px 4px 0 0;
}

.table-row {
  display: grid;
  grid-template-columns: 100px 120px 200px 300px 80px 100px 100px;
  padding: 16px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.table-row:last-child {
  border-bottom: none;
}

/* 列样式 */
[class^="col-"] {
  padding: 0 8px;
  font-size: 14px;
  color: #666;
}

.col-receiver,
.col-phone {
  color: #333;
}

.col-address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.col-default {
  text-align: center;
}

/* 按钮样式 */
:deep(.ant-btn-link) {
  padding: 0 4px;
  height: auto;
  font-size: 12px;
}

.default-active {
  color: #ff4400 !important;
  cursor: default;
}

/* 分割线样式 */
:deep(.ant-divider-vertical) {
  margin: 0 4px;
  height: 12px;
  background-color: #e8e8e8;
}

/* 响应式处理 */
@media screen and (max-width: 1200px) {
  .address-table {
    overflow-x: auto;
  }

  .table-header,
  .table-row {
    min-width: 1000px;
  }
}

/* 修改添加地址按钮样式 */
:deep(.ant-btn-primary) {
  background: #1890ff;
  border-color: #1890ff;
  border-radius: 4px;
  height: 32px;
  padding: 0 16px;
}

/* 添加卡片样式 */
.address-content-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}
</style>
